<template>
  <div class="reg">
    <h3>注册</h3>
    <el-divider></el-divider>
    <el-input v-model="username" placeholder="请输入" class="mb">
      <template slot="prepend">用户</template>
    </el-input>
    <el-input type="password" v-model="password" placeholder="请输入" class="mb">
      <template slot="prepend">密码</template>
    </el-input>
    <div class="error">{{message}}</div>
    <el-button type="primary" @click="reg">注册</el-button>
    <el-button @click="$router.push('/login')">登录</el-button>
  </div> 
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import {Route} from 'vue-router'
@Component({
  beforeRouteLeave(to:Route,from:Route,next:Function){
    if(this.username||this.password){
      let bl:boolean=window.confirm('是否要离开');
      next(bl)
    }else{
      next(true)
    }
  }
})
export default class Reg extends Vue {
  username:string = '';
  password:string = '';
  message:string = '';

  async reg(){
    let formData = new FormData();
    formData.append('username',this.username)
    formData.append('password',this.password)
    let res = await this.$axios({
      url:'/api/reg',
      method:'post',
      data:formData
    })

    if(res.data.err==0){
      this.$router.push('/login')
    }else{
      this.message=res.data.msg
    }
  }
}

</script>
<style scoped>
.reg{
  width:35%;
  height:auto;
  position: absolute;
  left:50%;top:50%;
  margin-left:-17%;
  transform: translateY(-50%)
}
.mb{
  margin-bottom: 20px;
}
.error{
  color:red
}
</style>
